<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display All Data from SMS_forward Table</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

<h2>SMS_forward Table Data</h2>

<table id="dataTable">
    <thead>
    <tr>
        <th>ID</th>
        <th>Created At</th>
        <th>SMS</th>
    </tr>
    </thead>
    <tbody>
    <!-- Data will be loaded here -->
    </tbody>
</table>

<script>
    // Replace with your actual API URL
    //const apiURL = 'https://cnlchrq5g6hen2t5llr0.baseapi.memfiredb.com/rest/v1/sms_forward?select=*';
    const apiURL = 'https://dshmbsawwrbuycnivcjs.supabase.co/rest/v1/sms_forward?select=*';
    // Your anon public key
    //const anonPubKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImV4cCI6MzI4NjY4NTY3OSwiaWF0IjoxNzA5ODg1Njc5LCJpc3MiOiJzdXBhYmFzZSJ9.Y3loZqk0iqgFwofs_Sa107YheczRlttX_ZTOMboaf7c';
    const anonPubKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImRzaG1ic2F3d3JidXljbml2Y2pzIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTM5Mjg2OTAsImV4cCI6MjA2OTUwNDY5MH0.fwRJD-WuST7mCbJf9h2i2Xk0z6mtCMCeV--JGUecC6A';

    // Function to fetch data from the API
    function fetchData() {
        fetch(apiURL, {
            method: 'GET',
            headers: {
                'apikey': anonPubKey,
                'Authorization': `Bearer ${anonPubKey}`,
                'Content-Type': 'application/json'
            }
        })
            .then(response => response.json())
            .then(data => {
                // Handle data
                const tableBody = document.getElementById('dataTable').querySelector('tbody');
                tableBody.innerHTML = ''; // Clear existing data

                data.forEach(row => {
                    const rowHtml = `
        <tr>
          <td>${row.id}</td>
          <td>${row.created_at}</td>
          <td>${row.message}</td>
        </tr>
      `;
                    tableBody.innerHTML += rowHtml;
                });
            })
            .catch(error => {
                console.error('Error fetching data:', error);
            });
    }

    // Call fetchData on page load
    fetchData();
</script>

<!-- 引入访客统计模块 -->
<script src="visitor-tracker.js"></script>
<!-- Cloudflare Web Analytics -->
<script defer src='./lib/cloudflare/beacon.min.js' data-cf-beacon='{"token": "0e55e488041949479a3dace73ef940cd"}'>
</script>
<!-- End Cloudflare Web Analytics -->

</body>
</html>